Minify JavaScript and CSS Çözümü

Javascript ve CSS Küçültmek

Genel Açıklama

Web sitesi kaynaklarınızdan bazıları (Javascript, CSS veya HTML) küçültülmüş olarak sunmuyorsa, Google bunu PageSpeed ​​Insight aracında bir uyarı olarak verecektir.

Bu makalede, daha hızlı bir yükleme süresi sağlamak ve Google PageSpeed ​​Insights'da daha yüksek bir puan kazanmak için kaynaklarınızı nasıl küçültülebileceği açıklanmaktadır. Google bunu 3 ayrı alarm olarak uyarmakta, ancak çok yakından ilgili oldukları için birlikte açıklandık.

Nedir?

Google’ın sözleriyle, “Kaynağın tarayıcı tarafından nasıl işlendiğini etkilemeden gereksiz veya gereğinden fazla verilerin kaldırılması, örneğin kod yorumları ve biçimlendirme, kullanılmayan kodu kaldırma, daha kısa değişken ve işlev adları vb.” anlamına gelir.

Küçültme işlemi, verinin boyutunu azaltmak için gereksiz karakterleri bir dosyadan kaldırır, böylece yükleme süreleri artar.Bir dosya küçültüldüğünde, yorumlar ve gereksiz beyaz boşluk karakterleri (boşluk, yeni satır ve sekme) kaldırılır.Bu, indirme dosyalarının boyutunun küçülmesinden dolayı yanıt süresini geliştirir.

Nasıl Yapılır?

JavaScript kodunu küçültmek için kullanılan iki popüler araç JSMin ve YUI Compressor'dır . YUI kompresörü CSS'yi de küçültebilir.

Dış komut dosyalarını ve stilleri küçültmenin yanı sıra, satır içi <script> ve <style> blokları küçültülebilir. Komut dosyalarınızı ve stillerinizi unutsanız bile, bunları küçültmek boyutu % 5 veya daha fazla azaltacaktır. JavaScript ve CSS kullanımı ve boyutu arttıkça, kodunuzu küçülterek kazanılan tasarruf da artar.Css için bir örneği ele aldığımızda;

Küçültülmüş olmayan CSS kodu örneği:

h1 {

font-weight: 400;

font-size: 35px;

line-height: 40px;

margin-bottom: 8px;

}

Küçültülmüş CSS kodu örneği:

h1{font-weight:400;font-size:35px;line-height:40px;margin-bottom:8px}